<template>
    <div class="art-detail">
        <div id="art-content" ref="content" :style="[contentStyles]">
            <div>
                <h1>{{article.article_title}}</h1>
                <span>{{article.article_create_time}}
                    <span> • </span>
                </span>
                <span>{{tag}}</span>
                <div v-html="markdownData" id="art-info" v-highlight></div>
            </div>
        </div>
        <button class="to-top" v-show="isShowToTopBtn" @click="topTop">top</button>
    </div>
</template>
<script>
    import { HeaderBar, FooterBar } from '../components/Layout/index'
    import IntroCard from '../components/Intro-Card'
    import ContentCard from '../components/Content-Card'
    import { ArticlesApi } from '../api'
    import marked from 'marked'
    import moment from 'moment'

    export default {
        name: 'Home',
        components: {
            HeaderBar,
            FooterBar,
            IntroCard,
            ContentCard
        },
        computed: {
            markdownData () {
                return marked(this.article.article_content || '', {gfm: true, sanitize: false, smartLists: false})
            }
        },
        data () {
            return {
                article: {},
                tag: '',
                articleId: '',
                contentStyles: {},
                isShowToTopBtn: false
            }
        },
        methods: {
            /**
             * 获取文章详情
             */
            getArticleDetail () {
                ArticlesApi.getArticlesDetail(this.articleId).then(res => {
                    if (res.data.status === 200) {
                        const articleData = res.data.data
                        if (articleData.article_create_time) {
                            articleData.article_create_time = moment(articleData.article_create_time).format('YYYY-MM-DD')
                        }
                        this.article = articleData
                        this.tag = articleData.article_type.article_type_name
                        const _this = this
                        setTimeout(function () {
                            _this.setContentHeight()
                        }, 10)
                    }
                })
            },
            /**
             * 滚动到页面顶部
             */
            topTop () {
                scrollTo(0, 0)
            },
            /**
             * 设置content高度
             */
            setContentHeight () {
                const winHeight = this.getWinHeight()
                const contentHeight = this.$refs.content.getBoundingClientRect().height
                if ((winHeight - 220) > contentHeight) {
                    this.contentStyles = {
                        'height': winHeight - 220 + 'px'
                    }
                }
            },
            /**
             * 页面滚动
             */
            handleScroll () {
                if (document.body.scrollTop >= 200) {
                    this.isShowToTopBtn = true
                } else {
                    this.isShowToTopBtn = false
                }
            },
            /**
             * 获取窗口高度
             * @returns {number}
             */
            getWinHeight () {
                let winHeight = 0
                if (window.innerHeight) {
                    winHeight = window.innerHeight
                } else if ((document.body) && (document.body.clientHeight)) {
                    winHeight = document.body.clientHeight
                }
                return winHeight
            }
        },
        ready () {
        },
        mounted () {
            this.$nextTick(function () {
                this.articleId = this.$route.params.art_id
                this.getArticleDetail()
                window.addEventListener('scroll', this.handleScroll)
            })
        }
    }
</script>

<style lang="scss">
    @import './style/articleDetail.scss';
</style>

